<template>
  <div class="home">
    <HelloWorld title="图书商城" rightText="我的书架" @goBook="goBook"/>

    <!-- 封装input -->
    <!-- v-model背后有2个操作  :value="title"    @input-->
    <myInput v-model="title"></myInput>
    <div class="book">
        <list v-for="item,index in resList" :key="item.id" :item="item"></list>
    </div>
    <!-- <p>{{title}}</p> -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import myInput from '@/components/myInput.vue'
import list from '@/components/List.vue'

export default {
  name: 'HomeView',
  data() {
    return {
        title:'',
        list:[]
    }
  },
  created() {
     this.$axios.get('data.json').then(res=>{
        console.log(res);
        this.list = res.data
     })
  },
//   搜索
  computed:{
    resList(){
        return this.list.filter(item=>item.name.includes(this.title))
    }
  },
  components: {
    HelloWorld,
    myInput,
    list
  },
  methods: {
    goBook(){
        this.$router.push('/about')
    }
  },
}
</script>
<style lang="scss" scoped>
.home{
    background:pink;
    .book{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
</style>

